<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<!-- 发布订阅：不会将消息直接发送给特定的订阅者，而是通过消息通道广播出去，订阅者通过订阅获取到想要的消息 -->
<body>
  <button id="btn">发布消息</button>
  <script>
    function EventEmitter () {

      this.tasks = {}
      // 订阅消息
      this.on = function(name, cb) {
        if(this.tasks[name]) {
          this.tasks[name].push(cb.bind(this, ...arguments))
        }else {
          this.tasks[name] = [cb.bind(this, ...arguments)]
        }
      }
      // 发布消息
      this.emit = function(name, ...arg) {
        if(!this.tasks[name]) return
        this.tasks[name].forEach(item => {
          item(...arg)
        })
      }
    }
    const eventEmitter = new EventEmitter()
    eventEmitter.on('test', function (val) {
      console.log(val + '你好')
    })
    eventEmitter.on('test1', function (val) {
      console.log(val + '你好')
    })
    let btn = document.getElementById('btn')
    btn.addEventListener('click', function() {
      eventEmitter.emit('test1', 'zizi')
    })
    // eventEmitter.emit('test', 'kunkun')
    // function demo1() {
    //   console.log(1111);
    //   throw('11111')
    // }
    // function demo2() {
    //   console.log(2222);
    // }
    // function demo3() {
    //   console.log(3333);
    //   // throw('33333')
    // }
    // function start() {
    //   // 如果这三个模块由不同的人开发，如果demo1有问题就会影响到demo2和demo3
    //   demo1()
    //   demo2()
    //   demo3()
    // }

    function demo1() {
      eventEmitter.on('success', () => console.log(1111))
      throw('11111')
    }
    function demo2() {
      eventEmitter.on('success', () => console.log(2222))
    }
    function demo3() {
      eventEmitter.on('success', () => console.log(3333))
      // throw('33333')
    }
    function start1() {
      // demo1()
      demo2()
      demo3()
    }
    start1()
    eventEmitter.emit('success')
  </script>
  
</body>
</html>